<template>
    <div style="margin-left: 650px">
      <el-form-item label="群组名" prop="kind">
        <el-select v-model="clusterName" placeholder="请选择群组" @click="getCluster" @change="">
          <el-option
              v-for="(item,index) in items"
              :key="index"
              :label="item.kind"
              :value="item.kind">
          </el-option>
        </el-select>
      </el-form-item>
    </div>

  <div style="width: 600px; margin-top:70px; margin-left: 650px">
    <span class="demonstration">选择问卷答题时间</span>
    <el-slider size="small" @click="onChange" v-model="cTime" show-input/>
  </div>

  <div style="width: 600px; margin-top:70px; margin-left: 650px">
    <span class="demonstration">选择问卷答题人数</span>
    <el-slider size="small" @click="onChange" v-model="value" show-input/>
  </div>

  <div style="margin-top: 100px"/>

  <el-carousel :interval="4000" type="card" height="200px" style="width: 900px; margin-left: 500px">
    <el-carousel-item v-for="url in urls" :key="url">
      <div class="demo-image__lazy" style="width: 300px;height : 400px; margin: auto">
        <el-image :key="url" :src="url" @click="cli(url)" lazy/>
      </div>
    </el-carousel-item>
  </el-carousel>

  <div style="margin-top: 50px;">
    上传背景图片
  </div>

  <div style="margin-top: 30px"/>

  <div>
    <el-upload
        v-model:file-list="fileList"
        action="http://localhost:8090/file/upload"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :dra="true"
    >
      <el-icon>
        <Plus/>
      </el-icon>
    </el-upload>
  </div>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image"/>
  </el-dialog>


  <div style="margin-top: 10px"/>
  <el-button type="primary" @click="sub">
    Upload
    <el-icon class="el-icon--right">
      <Upload/>
    </el-icon>
  </el-button>

</template>

<script lang="ts" setup>

import {ref} from 'vue'
import {Plus, Upload} from '@element-plus/icons-vue'
import {ElMessage, UploadProps, UploadUserFile} from 'element-plus'
import request from "../util/request.js";
import router from "../router/index.js";

let items =[
  {
    kind:"学生"
  }
];
let options=[]
const pics = [
  '../assets/login.jpg',
  '../assets/logo.png'
]

const urls = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
]
const fileList = ref<UploadUserFile[]>([])
const value = ref(0)
const cTime = ref(0)
const valueTime = ref('')
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
let clusterName = ref('')
const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

let imgUrl = ''
// function onChange(){
//   this.$forceUpdate()//强制更新
// }


function sub() {
  let cookies = document.cookie.split('; ')
  let length = cookies.length
  let i: number
  let qid: string = ''
  for (i = 0; i < length; i++) {
    if (cookies[i].startsWith('qid')) {
      qid = cookies[i]
    }
  }
  request.post('http://localhost:8090/questionnaire/individualization', {
    qid: qid.slice(4),
    type: imgUrl,
    answerTime: cTime.value,
    answerCount: value.value,
    answerGroup : clusterName.value
  })
  router.push("/Questionnaire")
}

function cli(url: string) {
  imgUrl = url
  document.body.style.backgroundImage = imgUrl
  console.log(imgUrl)
  ElMessage({
    showClose: true,
    message: '选择背景成功！',
    type: 'success'
  })
}

function DataShow() {
  console.log(valueTime.value[0])
  console.log(valueTime.value[1])
}

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
</script>
